import React, { useState } from 'react'
import { FontSizeOutlined, PictureOutlined, ShareAltOutlined,UnorderedListOutlined, TikTokOutlined, UsergroupAddOutlined, ProductOutlined, PlaySquareOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router';
import { Modal } from 'antd';
import Zoi from './Zoi';
import { useDispatch, useSelector } from 'react-redux';
import {AllDel}from '../../store/modules/create'
function Nav() {
  // 退出
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [isModalOpen,setIsModalOpen]=useState(false)
  const XHLlist=useSelector((state:any)=>state.reducer.currentXHL)
  console.log(XHLlist,'=====================11111111');
  

// 清空画布
const clear=()=>{
  dispatch(AllDel())
}

// OK 

const handleOk=()=>{
  setIsModalOpen(false)
}
// cancel 

const handleCancel=()=>{
  setIsModalOpen(false)
}

  // 预览
const showModal=()=>{
  setIsModalOpen(true)
}


  // 退出 
  const exit = () => {
    navigate(-1)
  }
  return (
    <div className='Nav'>
      <div className='logo'>
        {/* logo  */}
        <div><img src="//lib.eqh5.com/c/images/new_H5_logo-1411b4.png" alt="" /></div>
        <div className='VIP'><img src="../public/work/zhuan.png" alt="" />开通会员</div>
        <div className='Navcen'>
          <img src="../public/work/c.png" alt="" />
          风险提示
        </div>

      </div>
      <div className="div"> <div className="Navcen">
        <div>
          <FontSizeOutlined />
          <p>文本</p>
        </div>
        <div>
          <PictureOutlined />
          <p>图片</p>
        </div>
        <div>
          <TikTokOutlined />
          <p>音乐</p></div>
        <div>
          <PlaySquareOutlined />
          <p>视频</p></div>
      </div>
      <div className="Navcen1">
        <div>
          <ProductOutlined />
          <p>组件</p></div>
        <div>
          <UsergroupAddOutlined />
          <p>营销获客</p></div>
      </div></div>
     
      <div className='Navright'>
        <div><UnorderedListOutlined />更多</div>
        <button className='button_m' onClick={clear}>清空画布</button>
        <button className='button_Preview' onClick={showModal}>预览和设置</button>
        <Modal title='预览' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          {
            XHLlist&&XHLlist.map((item:any,index:number)=>(
              <div style={{width:'100px',height:'100px'}}>
                <Zoi key={index} element={item.payload}></Zoi>
              </div>
            ))
          }

        </Modal>
        <button>保存</button>
        <button>发布</button>
        <button onClick={exit}>退出</button>
      </div>
    </div>
  )
}

export default Nav
